
:root {
  /* 红、橙、黄、绿、蓝、靛、紫 */
  --color-ball-1: #ff69b3;
  --color-ball-2: #fe0000;
  --color-ball-3: #ce4621;
  --color-ball-4: #dca81f;
  --color-ball-5: #008001;
  --color-ball-6: #1aadda;
  --color-ball-7: #400097;
  --color-ball-8: #9500d5;
  --color-bg-1: rgba(10, 11, 8, 0.1);
  --color-bg-2: rgba(226, 15, 27, 0.1);
  --color-bg-3: rgba(54, 143, 15, 0.1);
  --color-bg-4: rgba(227, 150, 33, 0.1);
  --color-bg-5: rgba(51, 110, 207, 0.1);
  --color-bg-6: rgba(194, 59, 240, 0.1);
  --color-bg-7: rgba(0, 163, 232, 0.1);
  --color-bg-middle-1: rgba(10, 11, 8, 0.2);
  --color-bg-middle-2: rgba(226, 15, 27, 0.2);
  --color-bg-middle-3: rgba(54, 143, 15, 0.2);
  --color-bg-middle-4: rgba(227, 150, 33, 0.2);
  --color-bg-middle-5: rgba(51, 110, 207, 0.2);
  --color-bg-middle-6: rgba(194, 59, 240, 0.2);
  --color-bg-middle-7: rgba(0, 163, 232, 0.2);
}

/** ball style */
.ball {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-width: 1px;
  border-style: solid;
  border-color: #efefef;
  border-radius: 50%;
  margin: 2px;
  text-align: center;
  ;
}

.ball-1 {
  color: #FFFFFF;
  background-color: var(--color-ball-1);
}

.ball-2 {
  color: #FFFFFF;
  background-color: var(--color-ball-2);
}

.ball-3 {
  color: #FFFFFF;
  background-color: var(--color-ball-3);
}

.ball-4 {
  color: #FFFFFF;
  background-color: var(--color-ball-4);
}

.ball-5 {
  color: #FFFFFF;
  background-color: var(--color-ball-5);
}

.ball-6 {
  color: #FFFFFF;
  background-color: var(--color-ball-6);
}

.ball-7 {
  color: #FFFFFF;
  background-color: var(--color-ball-7);
}

.ball-8 {
  color: #FFFFFF;
  background-color: var(--color-ball-8);
}

.bg-light {
  background-color: #FFFFFF;
}

.bg-1 {
  background-color: var(--color-bg-1);
}

.bg-2 {
  background-color: var(--color-bg-2);
}

.bg-3 {
  background-color: var(--color-bg-3);
}

.bg-4 {
  background-color: var(--color-bg-4);
}

.bg-5 {
  background-color: var(--color-bg-5);
}

.bg-6 {
  background-color: var(--color-bg-6);
}

.bg-7 {
  background-color: var(--color-bg-7);
}

.bg-middle-1 {
  background-color: var(--color-bg-middle-1);
}

.bg-middle-2 {
  background-color: var(--color-bg-middle-2);
}

.bg-middle-3 {
  background-color: var(--color-bg-middle-3);
}

.bg-middle-4 {
  background-color: var(--color-bg-middle-4);
}

.bg-middle-5 {
  background-color: var(--color-bg-middle-5);
}

.bg-middle-6 {
  background-color: var(--color-bg-middle-6);
}

.bg-middle-7 {
  background-color: var(--color-bg-middle-7);
}